/**
 * @description  收益分析
 * @author zls
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Select, message } from 'antd';
import { SecondHeaderC, FirstHeaderC, XYAxisChartsC } from '@/src/comps';

const { Option } = Select;

class ProductAndBenchmarkIndustryExposure extends PureComponent {
  constructor() {
    super();
    this.state = {
      industry: '',
      industryList: [],
      data1: {
        xAxis: [],
        series: [],
      },
      data2: {
        xAxis: [],
        series: [],
      },
    };
  }

  componentDidMount() {}

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.industryType !== this.props.industryType) {
      this.getIndustryList(nextProps.industryType);
    }
    const { equityIndustryRiskM } = this.props;
    if (JSON.stringify(nextProps.equityIndustryRiskM.searchData) !== JSON.stringify(equityIndustryRiskM.searchData)) {
      if (nextProps.equityIndustryRiskM.searchData) {
        this.getData({ ...nextProps.equityIndustryRiskM.searchData, industry: this.state.industry });
      }
    }
  }

  getIndustryList = (e) => {
    this.props.dispatch({
      type: 'equityIndustryRiskM/queryIndustryCategory',
      payload: {
        industryType: e,
      },
      callback: (data) => {
        this.setState({
          industryList: data.data,
          industry: data?.data ? data[0]?.value : undefined,
        });
        this.getData({ ...this.props.equityIndustryRiskM.searchData, industry: data.data[0].value });
      },
    });
  };

  //获取数据
  getData = (payload) => {
    this.setState({
      data1: {},
      data2: {},
    });
    if (payload.industry) {
      this.props.dispatch({
        type: 'equityIndustryRiskM/getIndustryReturnExposure',
        payload: {
          ...payload,
        },
        callback: (data) => {
          this.setState({
            data1: data.data,
          });
        },
      });

      this.props.dispatch({
        type: 'equityIndustryRiskM/getIndustryCumReturnExposure',
        payload: {
          ...payload,
        },
        callback: (data) => {
          this.setState({
            data2: data.data,
          });
        },
      });
    }
  };

  onChange = (e) => {
    const { equityIndustryRiskM } = this.props;
    const { searchData } = equityIndustryRiskM;
    if (searchData) {
      this.setState({ industry: e });

      this.getData({ ...equityIndustryRiskM.searchData, industry: e });
    } else {
      message.info('查询条件已变更，请重新查询后再进行操作');
    }
  };

  render() {
    const { data1 = {}, data2 = {}, industryList, industry } = this.state;

    const { xAxis: xAxis1 = [], series: series1 } = data1;
    const { xAxis: xAxis2 = [], series: series2 } = data2;

    const getSeries = (data) =>
      data?.map((x, index) => {
        if (index == 2) {
          return {
            ...x,
            type: 'bar',
            yAxisIndex: 1,
          };
        } else {
          return {
            ...x,
            data: x.data.map((x) => Number(x * 100).toFixed(2)),
            type: 'line',
            yAxisIndex: 0,
          };
        }
      });

    return (
      <div style={{ marginTop: '20px' }}>
        <FirstHeaderC title='收益分析' />
        <div style={{ paddingLeft: '20px', marginBottom: '20px' }}>
          行业：
          <Select style={{ width: '200px' }} value={industry} onChange={this.onChange}>
            {industryList?.map((x) => (
              <Option key={x.value} value={x.value}>
                {x.title}
              </Option>
            ))}
          </Select>
        </div>
        <SecondHeaderC title='收益率分析' />
        <XYAxisChartsC series={getSeries(series1)} xAxis={xAxis1} height={358} dataZoom={true} yAxisRange={[null, null, []]} yAxisUnit={['收益率(%)', '行业敞口']} type='bar' />
        <SecondHeaderC title='累计收益分析' />
        <XYAxisChartsC series={getSeries(series2)} xAxis={xAxis2} height={358} dataZoom={true} yAxisRange={[]} yAxisUnit={['收益率(%)', '行业敞口']} type='bar' />
      </div>
    );
  }
}
export default connect(({ equityIndustryRiskM, loading }) => ({
  equityIndustryRiskM,
  loading: loading.effects['equityIndustryRiskM/getIndustryCumReturnExposure'],
}))(ProductAndBenchmarkIndustryExposure);
